<template>
    <div class="container">
        <div class="left">
            <CrossingUI :lightGroupObj="lightGroupObj[0]" />

        </div>
        <div class="right">
            <div><input type="text" ></div>
            <div><button @click="clkSave">保存</button></div>
            <div><button @click="getSchemeList">上传方案</button></div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import CrossingUI from '@renderer/components/CrossingUI.vue';
    import { ILightGroupRun, ISignaLightConfig } from '@renderer/interface';
    import { ElMessage } from 'element-plus';
    import { ref, reactive, watch } from 'vue';
    const schemeList = reactive<ISignaLightConfig[][]>([])
    const lightGroupObj = reactive<ILightGroupRun[]>([])

    //子更新后的数据
    function clkSave() {
        lightGroupObj[0].time++
        console.log(lightGroupObj[0])

    }

    async function getSchemeList() {
        const data = await window.electronApi.getSchemeList(0)
        if (!data) {
            ElMessage({
                type: 'error',
                message: '读取方案失败，请重试！！！',
            })
            return;
        }
        ElMessage({
            type: 'success',
            message: '读取方案成功！',
        })
        Object.assign(schemeList, data)
        console.log(schemeList)
        lightGroupObj.length = 0
        for (let j = 0; j < schemeList[0].length; j++) {
            const obj:ILightGroupRun = {
                time: schemeList[3][j].time as number,
                lightGroup: []
            }
            for (let i = 0; i < 4; i++) {
                obj.lightGroup.push({
                    zuo: schemeList[i][j].zuo,
                    zhi: schemeList[i][j].zhi,
                    you: schemeList[i][j].you,
                    renxing: schemeList[i][j].renxing,
                })
            }
            lightGroupObj.push(obj)
        }

    }
    watch(lightGroupObj, (val) => {
        console.log(lightGroupObj)
    })

</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: row;

        .left {
            flex: 7;
        }

        .right {
            flex: 3;
            display: flex;
            flex-direction: column;
            width: 100%;
            background-color: aquamarine;

            div {
                background-color: red;
                margin-bottom: 10px;

            }

            div:nth-child(2) {
                flex: 1;
            }
        }
    }
</style>